<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .block {
      margin-top: 30px;
      display: block;
      width: 100%;
      border: none;
      background-color: #ddd;
      color: black;
      padding: 14px 28px;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
    }
    .block:hover {
      background-color: #ddd;
      color: black;
    }
    </style>
</head>

<body>
  <div class="container main">
    <div id="error-box" class="alert alert-danger hidden" role="alert"></div>
    <div id="success-box" class="alert alert-success hidden" role="alert"></div>
    
    <div id="dropin-container"></div>
    <button type="button" class="block"  id="submit-button">Pay</button>

  </div>
  <script src="https://js.braintreegateway.com/web/dropin/1.35.0/js/dropin.min.js"></script>
  <script type="text/javascript">
    try {
      preURL = "https://api.migration.ichinesereader.com";
        // url for product
        if (window.location.host === "ichinesereader.com") {
          preURL = "https://api.ichinesereader.com";  
        } 
    } catch (error) { 
    }
    var button = document.querySelector('#submit-button');
    var errBox = document.getElementById('error-box');
    var successBox = document.getElementById('success-box');
    var planId = 'icr-yearly';
    var isSeparateFromSchool = true;

    function getCookie(name) {
      function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); }
      var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
      return match ? match[1] : null;
    }
    var planId = getCookie('planId');
    var token = getCookie('clientToken');
    var customerId = getCookie('customerId');
    var couponCode =getCookie('coupon');

    function displayErrorMessage(message) {
      document.getElementById('error-box').innerHTML = message;
      document.getElementById('error-box').classList.remove('hidden');
    }
    function displaySuccMessage(message) {
      document.getElementById('success-box').innerHTML = message;
      document.getElementById('success-box').classList.remove('hidden');
    }
    function clearErrorMessage() {
      document.getElementById('error-box').innerHTML = '';
      document.getElementById('error-box').classList.add('hidden');
    }

    function clearSuccMessage() {
      document.getElementById('success-box').innerHTML = '';
      document.getElementById('success-box').classList.add('hidden');
    }
    function triggerBrainTreePayment(post) {
      const url =  preURL + "/usermanager/payment/pay"
      let xhr = new XMLHttpRequest()
      xhr.open('POST', url, true)
      xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
      xhr.send(post);
      xhr.onload = function () {
          if(xhr.status === 200) {
              // need parse this id to flutter
              console.log('customerId:'+JSON.parse(xhr.responseText).id)
              //console.log(xhr.responseText)
               
          }
      }
    }
    setTimeout(buidPayment, 50);

    function buidPayment(){
      braintree.dropin.create({
      authorization: token,
      selector: '#dropin-container'
    }, function (createErr, instance) {
      if (createErr) {
        displayErrorMessage(createErr.message);
        return;
      }
      button.addEventListener('click', function () {
        clearErrorMessage();
        clearSuccMessage();
        instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
          if (requestPaymentMethodErr) {
            displayErrorMessage(requestPaymentMethodErr.message);
            return;
          }       
          displaySuccMessage('Send Payment Method Nonce (' + payload.nonce + ') to your server.');
          // send data to server
          let postObj = { 
              couponCode: couponCode, 
              customerId: customerId,
              planId: planId,
              token: payload.nonce
          }
          let post = JSON.stringify(postObj);
          triggerBrainTreePayment(post);
      
        });
      });
    });
    }

    
    </script>
</body>
</html>